#@layout()
#define title()
网信登记
#end
#define main()
<div style="text-align:center"><h1>群众网上信访登记</h1></div>
<div class="table_box">
    <form class="layui-form" action="#(ctx)/site/saveWxbd" method="post">
	    <blockquote class="layui-elem-quote layui-text">
	    <strong class="orange">温馨提示：</strong>
	    <p>在您通过本网站投诉时，请做到实事求是，并留下您的真实姓名、联系电话。请勿就同一信访事项重复提交，如有多次提交，只办理其中一个信访事项并回复。</p>
	    <p>请注意投诉过程中标有"<em>*</em>"的字段必须填写，否则无法成功提交。 </p>
	    </blockquote>
    
        <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">姓名<em>*</em></label>
		      <div class="layui-input-inline">
		        <input name="user.USER_NAME" lay-verify="required" autocomplete="off" class="layui-input" type="text">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">手机号<em>*</em></label>
		      <div class="layui-input-inline">
		        <input name="user.TELEPHONE" lay-verify="required|phone" autocomplete="off" class="layui-input" type="tel">
		      </div>
		    </div>
		</div>
		
		<div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">信访人数</label>
              <div class="layui-input-inline">
                <input name="letter.XFRS" lay-verify="number" autocomplete="off" class="layui-input" type="text">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">相关信访人数</label>
              <div class="layui-input-inline">
                <input name="letter.SJRS" lay-verify="number" autocomplete="off" class="layui-input" type="text">
              </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">证件类型<em>*</em></label>
              <div class="layui-input-inline">
                  <select name="user.ID_TYPE" lay-verify="required" lay-search="">
					  #for(idtype : idTypes)
					  <option value="#(idtype.value)">#(idtype.name)</option>
					  #end
		          </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">证件号码<em>*</em></label>
              <div class="layui-input-inline">
                <input name="user.ID_NUMBER" lay-verify="required" autocomplete="off" class="layui-input" type="text" maxlength="200">
              </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">联系地址<em>*</em></label>
            <div class="layui-input-block">
	            <div class="layui-input-inline">
	                <select name="province" id="province" lay-filter="province">
				        <option value="">请选择省份</option>
				    </select>
				</div>
				<div class="layui-input-inline">    
	                <select name="city" id="city" lay-filter="city">
				        <option value="">请选择城市</option>
				    </select>
				</div>
                <div class="layui-input-inline"> 
	                <select name="country" id="country" lay-filter="country">
				        <option value="">请选择县区</option>
				    </select>
				</div>
                <div class="layui-input-inline"> 
	                <input name="user.ADDRESS" lay-verify="required" id="homeAddr" autocomplete="off" class="layui-input" type="text">
				</div>
			</div>
        </div>
		
        <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">电子邮箱</label>
		      <div class="layui-input-inline">
		         <input name="user.EMAIL" lay-verify="email" autocomplete="off" class="layui-input" type="text">
		      </div>
		    </div>
		    <div class="layui-inline">
		        <label class="layui-form-label">户籍</label>
		        <div class="layui-input-inline">
		            <input name="user.CENSUS_REGISTER" autocomplete="off" class="layui-input" type="text">
		        </div>
		    </div>
		</div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input name="user.AGE" lay-verify="number" autocomplete="off" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
			             <input name="user.GENDER" value="1" title="男" checked="" type="radio">
			             <input name="user.GENDER" value="2" title="女" type="radio">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">职业</label>
                <div class="layui-input-inline">
                    <select name="user.JOB" id="job">
						#for(job : jobs)
                        <option value="#(job.value)">#(job.name)</option>
                        #end
	                </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-inline">
                    <select name="user.politicalStatus" id="politicalStatus">
						#for(item : POLITICAL_STATUES)
                        <option value="#(item.value)">#(item.name)</option>
                        #end
	                </select>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">工作单位</label>
                <div class="layui-input-inline">
                    <input name="user.WORK_ADDRESS" autocomplete="off" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">民族</label>
                <div class="layui-input-inline">
                    <select name="user.ETHNICITY" id="ethnicity">
                        #for(ethnicity : ethnicities)
                        <option value="#(ethnicity.value)">#(ethnicity.name)</option>
                        #end
                    </select>
                </div>
            </div>
        </div>
        
        <blockquote class="layui-elem-quote layui-text">
	    <p>信访事项信息(注意：标有"<em>*</em>"必须填写) </p>
	    </blockquote>
	    
	    <div class="layui-form-item">
		    <label class="layui-form-label">事项主题<em>*</em></label>
		    <div class="layui-input-block">
		        <input name="letter.GKXX" lay-verify="required" autocomplete="off" placeholder="事项主题" class="layui-input" type="text">
		    </div>
        </div>
        
	    <div class="layui-form-item">
		    <label class="layui-form-label">问题发生处<em>*</em></label>
		    <div class="layui-input-block">
		        <input name="letter.WTFSC" lay-verify="required" autocomplete="off" placeholder="问题发生处" class="layui-input" type="text">
		    </div>
        </div>
        
	    <div class="layui-form-item">
		    <label class="layui-form-label">信访目的</label>
		    <div class="layui-input-block">
                #for(xfmd : xfmddms)
                <input name="letter.XFMDDM" value="#(xfmd.value)" title="#(xfmd.name)" type="radio">
                #end
		    </div>
        </div>
        
	    <div class="layui-form-item">
		    <label class="layui-form-label">附件</label>
		    <div class="layui-input-block layui-upload">
		        <button type="button" class="layui-btn" id="test2">图片上传</button> 
		        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图：
				    <div class="layui-upload-list" id="demo2"></div>
				</blockquote>
				<p>
                    <em>请上传您反映的信访事项相关的材料的图片，最多上传5张图片，每张大小不超过2M，允许上传的文件类型（*.jpg,*.png,*.bmp）</em>
                </p>
                <input type="hidden" id="attachs" name="letter.ATTACHMENT">
		    </div>
        </div>
        
	    <div class="layui-form-item">
		    <label class="layui-form-label">内容说明<em>*</em></label>
		    <div class="layui-input-block">
		        <textarea placeholder="" 
		          name="letter.TSNR" id="tsnr" maxlength="2000" onkeydown="if(this.value.length>=2000) {event.returnValue=false}" 
		          lay-verify="textArea"
		          class="layui-textarea"></textarea>
		         <p>
                    <em>为方便您正确快捷地提交，请在记事本等文字编辑器中起草内容，再粘贴到本栏，不得少于10字，不得超过2000字。</em>
                </p>
		    </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">责任单位<em>*</em></label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
	                <select name="city" id="city2" lay-filter="city2">
	                    <option value="">请选择市</option>
	                </select>
	            </div> 
	            <div class="layui-input-inline">   
	                <select name="country" id="country2" lay-filter="country2">
	                    <option value="">请选择区</option>
	                </select>
	            </div> 
	                <div class="layui-form-mid layui-word-aux"><em>请根据信访人户籍所在地选择</em></div>
	                <input name="letter.ZRDW" id="zrdw" type="hidden">
                
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">可以公开</label>
            <div class="layui-input-block">
                <input name="letter.GKBZ" value="1" lay-skin="primary" title="是否同意公开" type="checkbox">
                <p><em>若选择允许公开，信访事项则可能在本站公开，接受社会评价</em></p>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">初次标志</label>
            <div class="layui-input-block">
                <input name="letter.BJGCCBZ" value="1" lay-skin="primary" title="初次标志" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">复查意见书</label>
            <div class="layui-input-block">
                <input name="letter.FCYJSBZ" value="1" lay-skin="primary" title="已有复查意见书" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">处理意见书</label>
            <div class="layui-input-block">
                <input name="letter.BJBZ" value="1" lay-skin="primary" title="已有处理意见书" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">复核意见书</label>
            <div class="layui-input-block">
                <input name="letter.FHYJSBZ" value="1" lay-skin="primary" title="已有复核意见书" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">法院受理</label>
            <div class="layui-input-block">
                <input name="letter.FYSLBZ" value="1" lay-skin="primary" title="法院已受理" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">仲裁机构受理</label>
            <div class="layui-input-block">
                <input name="letter.ZCJGSLBZ" value="1" lay-skin="primary" title="仲裁机构已受理" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">行政复议</label>
            <div class="layui-input-block">
                <input name="letter.XZFYBZ" value="1" lay-skin="primary" title="已行政复议" type="checkbox">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">验证手机号<em>*</em></label>
            <div class="layui-input-block">
	            <div class="layui-input-inline">
	                <input name="sendphone" lay-verify="required|phone" autocomplete="off" class="layui-input" type="tel">
	            </div> 
                <div class="layui-input-inline">     
	                <button class="layui-btn" >获取验证码</button>
	            </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">验证码<em>*</em></label>
            <div class="layui-input-inline">
                <input name="verifycode" lay-verify="required" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        
        <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit="" lay-filter="subbtn">提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">清空</button>
		    </div>
		</div>
    </form>
    
    <script type="text/javascript" src="#(ctx)/js/city.js" charset="utf-8"></script>
    <script type="text/javascript" src="#(ctx)/js/chooseArea.js" charset="utf-8"></script>
    
    <script type="text/javascript" src="#(ctx)/layui/src/layui.js" charset="utf-8"></script>
    <script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        
        //多图片上传
	    upload.render({
	        elem: '#test2'
	       ,url: '#(ctx)/site/uploadFile'
	       ,accept: 'images' //普通文件
           ,exts: 'jpg|png|bmp' //只允许上传图片文件
           ,size: 2048
	       ,multiple: true
	       ,number: 5
	       ,before: function(obj){
	            //预读本地文件示例，不支持ie8
	            obj.preview(function(index, file, result){
	                $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
	            });
	        }
	       ,done: function(res){
	           //上传完毕
	           var oldImgs = $("#attachs").val();
	           if($.trim(oldImgs).length==0){
	               oldImgs = ",";
	           }
	           if(res["result"]=='succ'){
	               oldImgs = oldImgs + res["id"] + ",";
	               $("#attachs").val(oldImgs);
	           }
	           
	        }
	  });
    });
    
    layui.use('form', function(){
        var $ = layui.jquery
            ,form = layui.form;
        
        //自定义验证规则
        form.verify({
            textArea: [/(.+){10,2000}$/, '不得少于10字，不得超过2000字'],
            email: function(value, item){ //value：表单的值、item：表单的DOM对象
                if($.trim(value).length > 0){
                    if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)){
                        return '邮箱格式不正确';
                    }
                }
            },
            number: function(value, item){ //value：表单的值、item：表单的DOM对象
                if($.trim(value).length > 0){
                    if(!/^[0-9]+$/.test(value)){
                        return '请填写数字';
                    }
                }
            }
        });
        
        form.on("select(province)", function(data){
            showCity(data.elem);
            $("#country").empty().append("<option value=\"\">请选择县区</option>");
            form.render("select");
        });
        form.on("select(city)", function(data){
            showCountry(data.elem);
            form.render("select");
        });
        form.on("select(country)", function(data){
            selecCountry(data.elem);
        });
        form.on("select(city2)", function(data){
            getGuangxiCountry(data.elem);
            form.render("select");
        });
        form.on("select(country2)", function(data){
            chooseCountry(data.elem);
        });
        
        form.on("submit(subbtn)", function(data){
        console.log(data.field);
        /*
              console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
              console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			  */
        });
    });
</script>
</div>
#end